<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="utf-8">
	<base href="../../">
	<title>流程管理 - Powered By jiadao</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
	<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />

	<link href="css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.dataTables.min.js" type="text/javascript"></script> 
	
	<script src="js/Sortable.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/vue.js"></script>
	<style>
		.table-column-select{
			width: 100px;
		}
		.placeholder{
			height: 50px;
			border: gray solid 1px;
			background-color: gray;
		}
		table.dataTable.nowrap th, table.dataTable.nowrap td{
			white-space: normal !important;
		}

	</style>
</head>
<body>
		<div id="app">
			<div class="container">
				<h3>流程模型管理</h3>
				
				<div class="row-fluid" style="padding-top: 20px;" >

					<p>
						<a target="_blank"  href="pages/process/process_add.html" type="button" class="btn btn-primary">新建流程模型</a>
						</p> 
				</div>
				<div class="row-fluid">
					<h3>流程列表</h3>
					<div class="span12">
						<table id="data_table" class="table table-bordered table-striped"></table>
					</div>
				</div>

				<h3>可启动流程</h3>
				<div v-for=" (item, index) in prodessDefines">
					<a target="_blank" @click="startProcess(item.key,item.desc)" type="button" class="btn btn-primary">{{item.name}}</a>
				</div>

				<h3>测试请假流程(需提前准备好请假相关接口)</h3>
				<a target="_blank" href="pages/process/process_start.html?processKey=leave" type="button" class="btn btn-primary">员工1发起请假</a>
				<a target="_blank" href="pages/process/user_done_task_list.html?user_id=1" type="button" class="btn btn-primary">员工1查看已提交请假</a>
				<br/><br/>
				<a target="_blank" href="pages/process/user_task_list.html?user_id=2" type="button" class="btn btn-primary">经理2审批请假</a>
				<a target="_blank" href="pages/process/user_done_task_list.html?user_id=2" type="button" class="btn btn-primary">经理2查看已审批请假</a>
				<br/><br/>
				<a target="_blank" href="pages/process/user_task_list.html?user_id=3" type="button" class="btn btn-primary">老板3审批超过3天的请假</a>
				<a target="_blank" href="pages/process/user_done_task_list.html?user_id=3" type="button" class="btn btn-primary">老板3查看已审批请假</a>
			</div>
			
		</div>

<script type="text/javascript">
	var data_table = null
	var data_list_url = '/process/modeler/list'
	var data_delet_url = '/process/modeler/remove'
 
	function rebuildTable(url){
		
		if(data_table != null){
			//销毁对象
			data_table.destroy()
			//清空dom
			$('#data_table').empty()
		}
		//复制resultHeaders对象，不然会被DataTable修改，添加额外信息
		var result_headers = $.extend(true, [], processData.resultHeaders);
		
		data_table = $('#data_table').DataTable( {
				renderer: "bootstrap",
				ajax:{
					url:url,
					type:'post',
				},
				destroy: true,
				ordering:false,
				paging: true,
				lengthChange: false,
				pageLength: 5,
				searching:false,
				//data: data,
				// scrollX:true,//水平滚动
				// autoWidth:true,
				columns:  result_headers,
				language:datatable_language,
				autoWidth: false,
				columnDefs:[
                	{
                        "targets":[1],
						"data": 'id',
						"render": function ( data, type, row, meta ) {
							return '<a target="_blank"  href="pages/process/process_add.html?id='+row.id+'">'+data+'</a>'
						}
					},
					{
						"targets":[4],
						"render": function ( data, type, row, meta ) {
							return '<a target="_blank"  href="/modeler/modeler.html?modelId='+row.id+'" class="btn btn-primary">设计</a>\
									<button name="deploy"" type="button" class="btn btn-success">部署</button>\
									<button name="del" type="button" class="btn btn-danger">删除</button>'
						}
                     } 
                ]
				
		});

	}

	$(function(){
		$('#data_table tbody').on( 'click', 'button', function () {
            var data = data_table.row( $(this).parents('tr') ).data();
			console.log(JSON.stringify(data))
			if(this.name == 'deploy'){
				$.post("process/modeler/deploy/" + data.id, "", function(result) {
                    alert(result.msg);
                });
			}
			else if(this.name == 'del'){
				if(confirm('确认删除'+data.name+"吗？")){
					$.ajax({
						url: data_delet_url,
						type: 'post',
						dataType: 'json',
						data: {id:data.id},
					})
					.done(function(data) {
						if (data.code==CODE_SUCCESS) {
							alert("删除成功")
							data_table.ajax.reload();
						}
						else{
							alert("删除失败")
						}
					})
					.fail(function() {
						alert("error");
					});
				}
			}
        });
	})


	</script>

	<script>
	var processData ={
			
			resultHeaders:[{'title':'id','data':'id',width:"30px"},
			{'title':'流程名', 'data':'name',width:"60px"},
			{'title':'流程key','data':'key',width:"60px"},
			{'title':'备注','data':'metaInfo',width:"60px"},
			{'title':'操作','data':'',width:"60px"}],

			prodessDefines:[]
	}


	
	var app = new Vue({
		el: '#app',
		data: processData,

		mounted:function(){
				// rebuildTable('/api-gen/getApiList',params)
				this.queryModels()
				$.get('process/list',{},function(ret){
					processData.prodessDefines = ret.data
				},'json')
		},
		methods:{
			queryModels:function()  {
				rebuildTable(data_list_url)
			},
			
			startProcess:function(processKey,formName){
				url = 'pages/process/process_start.html?processKey='+processKey
				window.open(url, '_blank')
			}

		},
		computed:{
			
		}
	})
</script>
</body>
</html>